<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson 13</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
    <div>hello</div>
    <counter />
    <hello-world />
</div>
</body>

<script>
    // 局部组件
    const Counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `<div @click="count += 1">{{ count }}</div>`
    }

    const HelloWorld = {
        template: `<div>hello world</div>`
    }

    const app = Vue.createApp({
        components: {'counter': Counter, 'hello-world': HelloWorld},
        data() {
            return {

            }
        }
    });


    // 全局组件
    // app.component('counter-parent', {
    //     template: `<counter />`
    // })
    //
    // app.component('counter', {
    //     data() {
    //         return {
    //             count: 1
    //         }
    //     },
    //     template: `<div @click="count += 1">{{ count }}</div>`
    // })

    const vm = app.mount('#root');
</script>
</html>